<template>
  <div>
    <div style="margin: 10px;text-align: center;">
      <el-input
        v-model="cdtSname"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        placeholder="门店名称"
        size="small"
      />
      <el-button
        class="filter-item"
        style="margin-right: 10px"
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="searchSalon"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        style="margin-right: 10px"
        icon="el-icon-refresh"
        size="small"
        @click="resetSalon"
      >
        重置
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        label="操作"
        align="center"
        width="310"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button v-if="row.alarm && row.alarm.length > 0" type="warning" size="mini" @click="iniAlarm(row)">
            报警
          </el-button>
          <el-button type="primary" size="mini" @click="getReplay(row)">
            复盘
          </el-button>
          <el-button type="success" size="mini" @click="getCost(row.id)">
            成本
          </el-button>
          <el-button type="danger" size="mini" @click="getPlay(row.id)">
            计划&产值
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="plan"
        label="本月计划・元"
        align="center"
        width="150"
      />
      <el-table-column
        prop="money"
        label="本月实际・元"
        align="center"
        width="150"
      />
      <el-table-column
        prop="sname"
        label="店铺全称"
        align="center"
        show-overflow-tooltip
      />
      <!-- <el-table-column
        prop="period"
        label="履约周期"
        align="center"
        show-overflow-tooltip
      /> -->
      <!-- <el-table-column
        prop="address"
        label="店家地址"
        align="center"
        show-overflow-tooltip
      /> -->
      <el-table-column
        prop="code"
        label="店家编号"
        align="center"
        width="130"
      />
      <el-table-column label="履约开始" width="100px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.bgntime | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="履约结束" width="100px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.endtime | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="机构状态"
        align="center"
        width="80"
      >
        <template slot-scope="{ row }">
          <span>{{ row.status | parseStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="countdown"
        label="合约倒计时"
        align="center"
        width="100"
      />
      <el-table-column
        prop="quota"
        label="试用上限"
        align="center"
        width="80"
      />
      <el-table-column label="试用截至" width="100px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.deadline | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="80"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="editSalon(row)">
            变更
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      style="margin-top: -120px; height: 1000px"
    >
      <div style="margin-top: -20px; margin-bottom: 5px">
        <el-input
          v-model="newContent"
          class="filter-item"
          style="width: 800px"
          placeholder="请输入新的复盘"
        />
        <el-button
          type="primary"
          style="margin-left: 10px"
          icon="el-icon-edit"
          @click="addReplay()"
        >
          新增
        </el-button>
      </div>
      <el-table
        v-loading="listLoading2"
        :data="listReplay"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column
          prop="createTime"
          label="复盘时间"
          width="160px"
          align="center"
        />
        <el-table-column
          prop="content"
          label="复盘"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="recorder"
          label="填写人"
          align="center"
          width="100"
        />
      </el-table>
      <pagination
        v-show="total2 > 0"
        :total="total2"
        :page.sync="listQuery2.page"
        :limit.sync="listQuery2.limit"
        @pagination="requireData"
      />
    </el-dialog>

    <el-dialog title="请勾选已解决的报警并提交" :visible.sync="showAlarm">
      <div style="display: flex;justify-content: center;">
        <el-checkbox-group
          v-model="checkListAlarm"
          style="display: flex; flex-direction: column"
        >
          <el-checkbox
            v-for="(item, index) in salonAlarm"
            :key="index"
            :label="item"
          >{{ item.item }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div style="display: flex;justify-content: center;margin-top: 20px;">
        <el-button type="primary" style="width: 200px;" @click="onAlarm">提交变更</el-button>
      </div>
    </el-dialog>

    <el-drawer
      title="本院个人计划与产值"
      :visible.sync="showPlan"
      direction="ltr"
      custom-class="demo-drawer"
    >
      <el-table :data="lstMonthPlans">
        <el-table-column property="nickName" label="管家" align="center"></el-table-column>
        <el-table-column property="moneyPlan" label="本月计划・元" align="center"></el-table-column>
        <el-table-column property="money" label="本月产值・元" align="center"></el-table-column>
      </el-table>
    </el-drawer>

    <el-drawer
      title="成本明细"
      :visible.sync="showCost"
      direction="ltr"
      custom-class="demo-drawer"
      size="36%"
    >
      <el-table :data="lstCost">
        <el-table-column property="createTime" label="发生时间" align="center" width="160"></el-table-column>
        <el-table-column label="种类" align="center"  width="80">
          <template slot-scope="{ row }">
            <span>{{ row.sort | fltSort }}</span>
          </template>
        </el-table-column>
        <el-table-column property="type" label="补充说明" align="center"></el-table-column>
        <el-table-column property="money" label="成本・元" align="center" width="150"></el-table-column>
        <el-table-column label="当前状态" align="center" width="100">
          <template slot-scope="{ row }">
            <el-tag size="mini" :type="row.status | statusFilter">
              {{ row.status | statusFilter2 }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

    <el-drawer
      title="变更机构"
      :visible.sync="showEdit"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <el-form label-width="180px">
        <el-form-item
            label="机构状态"
            style="width: 500px;margin-left: 10px;"
        >
          <el-radio v-model="shop.status" :label="0">履约期</el-radio>
          <el-radio v-model="shop.status" :label="1">试用期</el-radio>
          <el-radio v-model="shop.status" :label="2">停滞期</el-radio>
        </el-form-item>
        <el-form-item label="试用期人数上限">
          <el-input-number v-model="shop.quota" style="width: 200px;margin-left: 10px;" :min="1" controls-position="right" />
        </el-form-item>
        <el-form-item label="试用截至日期">
          <el-date-picker v-model="shop.deadline" style="width: 200px;margin-left: 10px;" type="date" placeholder="试用截至日期" />
        </el-form-item>
        <el-form-item label="履约开始日期">
          <el-date-picker v-model="shop.bgntime" style="width: 200px;margin-left: 10px;" type="date" placeholder="履约结束日期" />
        </el-form-item>
        <el-form-item label="履约结束日期">
          <el-date-picker v-model="shop.endtime" style="width: 200px;margin-left: 10px;" type="date" placeholder="履约结束日期" />
        </el-form-item>
      </el-form>
      <el-button style="margin: 30px 0 0 300px;" type="primary" @click="updateData">提交变更</el-button>
    </el-drawer>
  </div>
</template>

<script>
import {
  getSalonList2,
  getSalonReplay,
  setSalonReplay,
  getAlarms,
  updateAlarm,
  getSnameSalon
} from '@/api/txs'
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
import { statMonthPlanMoney, getAdminsBySid } from '@/api/admin'
import { getSpendBySid, putSalonByMiddle } from '@/api/ym'

export default {
  components: { Pagination },
  filters: {
    parseStatus (status) {
      switch(status) {
        case 0:
          return '履约期'
        case 1:
          return '试用期'
        case 2:
          return '停滞期'
      }
    },
    parseTime (time) {
      if(time) {
        return dayjs(time).format('YYYY-MM-DD')
      }
    },
    fltSort(sort) {
      switch (sort) {
        case 0:
          return '房租'
        case 1:
          return '物业'
        case 2:
          return '水电'
        case 3:
          return '宽带'
        case 4:
          return '管家'
        case 5:
          return '操作'
        case 6:
          return '其他'
        case 7:
          return '耗材'
        case 8:
          return '三方'
        case 9:
          return '流量'
        case 10:
          return '客情'
        case 11:
          return '运营'
      }
    },
    statusFilter (status) {
      const statusMap = {
        0: 'danger',
        1: 'warning',
        2: 'success'
      }
      return statusMap[status]
    },
    statusFilter2 (status) {
      const statusMap2 = {
        0: '待财务确认',
        1: '待老板确认',
        2: '老板已确认'
      }
      return statusMap2[status]
    }
  },
  data () {
    return {
      cdtSname: '',
      shop: {
        status: undefined,
        deadline: undefined,
        bgntime: undefined,
        endtime: undefined,
        quota: undefined
      },
      salonRow: {},
      checkListAlarm: [],
      salonAlarm: [],
      lstAlarm: [],
      newContent: '',
      total: 0,
      total2: 0,
      listQuery: {
        page: 1,
        limit: 12
      },
      listQuery2: {
        page: 1,
        limit: 12
      },
      dialogFormVisible: false,
      salonId: 0,
      title: '',
      list: null,
      listReplay: [],
      lstPlan: [],
      lstMonthPlans: [],
      lstCost: [],
      listLoading: true,
      listLoading2: true,
      showAlarm: false,
      showCost: false,
      showPlan: false,
      showEdit: false
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created () {
    getAlarms().then(res => {
      this.lstAlarm = res.data.data
    })
    statMonthPlanMoney().then(res => {
      this.lstPlan = res.data.data
      this.fetchData()
    })
  },
  methods: {
    searchSalon() {
      if(this.cdtSname !== '') {
        this.listLoading = true
        getSnameSalon(this.cdtSname).then(res => {
          this.list = res.data.data
          this.list.forEach(s => {
            if(s.status > 0) {
              s.countdown = '--'
            } else if (s.endtime) {
              const now = dayjs()
              const stoptime = dayjs(s.endtime)
              s.countdown = stoptime.diff(now, 'day') + '天'
            }

            const obj = this.lstPlan.find(p => p.id === (s.id+''))
            if(obj) {
              s.plan = obj.plan
              s.money = obj.money
            } else {
              s.plan = 0
              s.money = 0
            }
          })
          this.total = 0
          this.listLoading = false
        })
      }
    },
    resetSalon () {
      this.cdtSname = ''
      this.fetchData()
    },
    getCost(id) {
      this.lstCost = []
      getSpendBySid(id, -1).then(res => {
        this.lstCost = res.data.data
        this.showCost = true
      })
    },
    getPlay(id) {
      this.lstMonthPlans = []
      getAdminsBySid(id).then(res => {
        this.lstMonthPlans = res.data.data
        this.showPlan = true
      })
    },
    iniAlarm (row) {
      this.salonRow = row
      this.checkListAlarm = []
      this.salonAlarm = []
      if (row.alarm) {
        const lst = row.alarm.split(';').map(Number)
        // this.salonAlarm = this.lstAlarm.filter(a => lst.includes(a.id || a.id+10000));
        lst.forEach(a => {
          const obj = {
            id: a % 10000,
            item: this.lstAlarm.find(v => v.id === a % 10000).item,
            status: a > 10000
          }
          this.salonAlarm.push(obj)
        })
        this.checkListAlarm = this.salonAlarm.filter(a => a.status)
      }
      this.showAlarm = true
    },
    onAlarm() {
      const reval = this.salonAlarm.map(a => {
        return this.checkListAlarm.includes(a) ? (a.id + 10000) : a.id
      }).join(';')
      // const reval = this.checkListAlarm.map(a => {
      //   return a.status ? (a.id % 10000)+10000 : (a.id % 10000)
      // }).join(';')
      this.salonRow.alarm = reval
      updateAlarm(this.salonRow.id, reval).then(res => {
          this.$notify({
            title: res.data.message,
            message: res.data.status,
            type: 'success',
            duration: 2000
          })
        })
      this.showAlarm = false
    },
    addReplay () {
      if (this.newContent === '') {
        this.$message.warning('警告：请先填写复盘内容！')
      } else {
        setSalonReplay({
          sid: this.salonId,
          content: this.newContent,
          recorder: this.name
        }).then(res => {
          this.requireData()
          this.newContent = ''
          this.$notify({
            title: res.data.message,
            message: res.data.status,
            type: 'success',
            duration: 2000
          })
        })
      }
    },
    fetchData () {
      this.listLoading = true
      getSalonList2(this.listQuery.page, this.listQuery.limit).then(res => {
        this.list = res.data.data.records
        this.list.forEach(s => {
          if(s.status > 0) {
            s.countdown = '--'
          } else if (s.endtime) {
            const now = dayjs()
            const stoptime = dayjs(s.endtime)
            s.countdown = stoptime.diff(now, 'day') + '天'
          }

          const obj = this.lstPlan.find(p => p.id === (s.id+''))
          if(obj) {
            s.plan = obj.plan
            s.money = obj.money
          } else {
            s.plan = 0
            s.money = 0
          }
        })
        this.total = res.data.data.total

        // this.list.forEach(s => {
        //   const obj = this.lstPlan.find(p => p.id === (s.id+''))
        //   if(obj) {
        //     s.plan = obj.plan
        //     s.money = obj.money
        //   } else {
        //     s.plan = 0
        //     s.money = 0
        //   }
        // })
        this.listLoading = false
      })
    },
    getReplay (row) {
      this.salonId = row.id
      this.title = row.sname
      this.dialogFormVisible = true
      this.requireData()
    },
    editSalon(row) {
      this.shop = row
      this.showEdit = true
    },
    updateData() {
      if (this.shop.bgntime) {
        this.shop.bgntime = dayjs(this.shop.bgntime).add(1, 'day')
      }
      if (this.shop.endtime) {
        // this.shop.period = this.shop.period.split('至')[0] + '至 【 ' + dayjs(this.shop.endtime).format('YYYY年MM月DD日') + ' 】'
        this.shop.endtime = dayjs(this.shop.endtime).add(1, 'day')
      }
      if (this.shop.deadline) {
        this.shop.deadline = dayjs(this.shop.deadline).add(1, 'day')
      }
      putSalonByMiddle(this.shop).then(res => {
        this.$notify({
          title: res.data.message,
          message: res.data.status,
          type: 'success',
          duration: 2000
        })
        if (this.shop.deadline) {
          this.shop.deadline = dayjs(this.shop.deadline).add(-1, 'day')
        }
        if (this.shop.bgntime) {
          this.shop.bgntime = dayjs(this.shop.bgntime).add(-1, 'day')
        }
        if (this.shop.endtime) {
          this.shop.endtime = dayjs(this.shop.endtime).add(-1, 'day')
        }
        })
      this.showEdit = false
    },
    requireData () {
      this.listLoading2 = true
      getSalonReplay(this.salonId, this.listQuery2.page, this.listQuery2.limit).then(
        res => {
          this.listReplay = res.data.data.records
          this.total2 = res.data.data.total
          this.listLoading2 = false
        }
      )
    }
  }
}
</script>
